<template>
  <i :class="'iconfont yun-icon--' + name" :style="{fontSize:size,color:color,transition:'.5s ease',cursor:cursor,verticalAlign:vertical,paddingBottom:pb}" ></i>
</template>

<script>
  export default {
    name: 'yunIcon',

    props: {
      name: String,
      size: String,
      color: String,
      pb:String,
      vertical:String,
      canClick:{
        type:Boolean,
        default:true,
      },
    },

    data(){
      return{
        prevColor:'',
        nowColor:this.color,
        cursor:this.canClick?'pointer':'auto'
      }
    },


    methods:{

    }
  };
</script>


<style lang="scss" scoped>
  i{
    transition:.5s ease;
    display:inline-block;
    padding-bottom: 0 !important;
    &:before{
      display: inline-block;
      height:100%;
    }
  }
</style>
